<template>
	<div class="prize-dialog" v-show="showDialogVisible">
    <div class="prize-dialog-wrapper" @touchmove.prevent>
      <div
        class="prize-shade"
        :class="disableClick ? 'disableClick' : ''"
        @click="handleClickDialogClose"></div>
  
      <div class="prize-box" v-show="showBox"> <!--没有开的宝箱-->
        <!--rubberBand 抖动动画-->
        <div class="prize-box-item animated infinite">
          <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/box1.png" alt="">
        </div>
      </div>
  
      <transition name="van-fade"> <!--中奖的宝箱-->
        <div
          class="prize-box-win"
          :class="disableClick ? 'disableClick' : ''"
          @click="handleClickDialogClose"
          v-show="showPrize">
          <div class="prize-box-win-txt">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/prizeTxt1.png" alt="">
            <div class="num"><span>{{ prizeRadishNum }}</span></div>
          </div>
          <div class="prize-box-win-item">
            <div class="gold-light">
              <div class="gold-light-item"></div>
            </div>
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/box3.png" alt="">
          </div>
        </div>
      </transition>
  
      <transition name="van-fade"> <!--未中奖的宝箱-->
        <div
          class="prize-box-no"
          :class="disableClick ? 'disableClick' : ''"
          @click="handleClickDialogClose"
          v-show="showNoPrize">
          <div class="prize-box-no-txt">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/prizeTxt2.png" alt="">
            <div class="num"><span>0</span></div>
          </div>
          <div class="prize-box-no-item">
            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/box2.png" alt="">
          </div>
        </div>
      </transition>
  
      <transition name="van-fade"> <!--没有次数了-->
        <div
          class="prize-no-time"
          @click="handleClickDialogClose"
          v-show="showNoTime">
          <div class="prize-box-no-times">
            <div class="dialog-wrap">
              <div class="dialog-wrap-tit">次数已耗尽</div>
              <div class="dialog-wrap-con" v-if="addLuoboActNums && addLuoboActNums.length > 0">
                <div class="txt">以下方式可以获得拔萝卜的次数哦~</div>
                <div class="txt" v-for="(item, index) in addLuoboActNums" :key="index">{{ item }}</div>
              </div>
              <div class="dialog-wrap-con" v-else>
                <div class="txt">每天都会刷新拔萝卜的次数，</div>
                <div class="txt">明天再来看看吧~</div>
              </div>
              <div class="btn" @click="handleClickDialogClose">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/noTimeBtn.png" alt="">
              </div>
            </div>
            <!--<img class="" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/noTimes.png" alt="">-->
          </div>
        </div>
      </transition>
  
      <transition name="van-fade"> <!--活动未开启-->
        <div
          class="prize-no-time"
          v-show="showNoStart">
          <div class="prize-box-no-times">
            <img class="" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/noStart.png" alt="">
          </div>
        </div>
      </transition>
  
      <transition name="van-slide-up"> <!--礼品的弹层-->
        <div class="gift-wrapper" v-if="showGiftDialog">
          <div class="header-radish">
            <img class="" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/radish2.png" alt="">
          </div>
          <div class="gift-wrapper-head">
            <div class="avatar"></div>
            <div class="head-info">
              <div class="tips">萝卜</div>
              <div class="num">{{ radishNum }}</div>
              <div class="close" @click="handleClickDialogClose">
                <svg-icon icon-class="icon_close" />
              </div>
            </div>
          </div>
          <div class="gift-wrapper-con">
            <div class="gift-wrapper-con-item">
              <div class="gift-info point">
                <div class="gift-info-left">
                  <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/coin.png" alt="">
                </div>
                <div class="gift-info-middle" @click="handleClickHadFocus">
                  <div class="txt">可兑换
                    <!--<span>{{ changePoint }}</span>-->
                    <div class="input"><input type="number" @blur="blurEvent" ref="numberInput" v-model="changePoint"></div>
                    积分</div>
                </div>
                <div class="gift-info-right fr">
                  <div class="btn" @click="handleClickExchange('point')" :class="pointDisable ? 'disabled': ''">兑换</div>
                </div>
              </div>
            </div>
            <div
              v-for="(item, index) in itemList"
              :key="index"
              class="gift-wrapper-con-item">
              <div class="gift-info goods">
                <div class="gift-info-left">
                  <img :src="item.pic || defaultAvatar" alt="">
                </div>
                <div class="gift-info-middle">
                  <div class="title">{{ item.title }}</div>
                  <div class="num">
                    <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/radish3.png" alt="">
                    <span>{{ item.exchangeNum }}根</span>
                  </div>
                </div>
                <div class="gift-info-right fr">
                  <div class="btn" :class="radishNum >= item.exchangeNum ? '': 'disabled'" @click="handleClickExchange('goods')">兑换</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
      
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  import { exchangePoint, exchangeGoods } from '@/api/marketGame/radishSprite'
  export default Vue.extend({
    name: 'index',
    props: {
      itemList: {
        type: Array
      },
      radishNum: {
        type: Number
      },
      exchangePointRate: {
        type: Number // 兑换的比例
      },
      prizeRadishNum: {
        type: Number // 获奖的萝卜数
      },
      addLuoboActNums: {
        type: Array // 获取萝卜的规则
      }
    },
    data() {
      return {
        defaultAvatar: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        disableClick: true,
        showDialogVisible: false,
        showBox: false,
        showPrize: false,
        showNoPrize: false,
        showNoTime: false,
        showNoStart: false,
        showGiftDialog: false,
        dialogType: '',
        changePoint: 0,
        pointDisable: false
      }
    },
    created() {
      this.changePoint = this.exChangePoint || 0
    },
    watch: {
      radishNum() { // 修改可兑换积分
        this.changePoint = this.exChangePoint
      },
      changePoint(val) { // 验证修改的积分是否大于萝卜
        const oldVal = this.exChangePoint
        if (parseInt(val) > parseInt(oldVal)) {
          this.$Error('抱歉萝卜数不足, 无法兑换当前积分')
          this.pointDisable = true
        } else {
          this.pointDisable = false
        }
      }
    },
    computed: {
      exChangePoint() {
        const exchangePointRate = this.exchangePointRate
        const result = (exchangePointRate / 100) * this.radishNum
        // // console.log(this.radishNum, exchangePointRate)
        return parseInt(result)
      },
      submitRadishNum() {
        const exchangePointRate = this.exchangePointRate
        const result = this.changePoint / (exchangePointRate / 100)
        return parseInt(result)
      }
    },
    methods: {
      blurEvent() {
        window.scroll(0, 0)
      },
      /**
       * 获取焦点
       */
      handleClickHadFocus() {
        this.$refs.numberInput.focus()
      },
      /**
       * 点击兑换
       */
      handleClickExchange(param) {
        if (param === 'point') {
          this.exchangePointPost()
        } else if (param === 'goods') {
          this.exchangeGoodsPost()
        }
      },
      /**
       * 兑换积分接口
       */
      exchangePointPost() {
        const param = {}
        param.luobo_num = this.submitRadishNum
        exchangePoint(param).then(res => {
          if (res.status === 1) {
            this.$Error('兑换成功')
            this.$emit('refreshFn')
            this.handleClickDialogClose()
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 兑换商品接口
       */
      exchangeGoodsPost() {
        exchangeGoods().then(res => {
          if (res.status === 1) {
            // TODO 小程序跳转
              openPage(res.data.redirect_url)
          }
        })
      },
      /**
       * 关闭弹层
       */
      handleClickDialogClose() {
        if (this.dialogType === 'giftDialog') {
          setTimeout(() => {
            this.showDialogVisible = false
          }, 200)
        } else {
          this.showDialogVisible = false
        }
        this.showPrize = false
        this.showNoPrize = false
        this.showNoTime = false
        this.showGiftDialog = false
        this.disableClick = true // 为了刚展开弹层不能马上点击导致消失
      },
      /**
       * 宝箱弹入的效果
       */
      boxEnterAnimate(element) {
        this.showBox = true
        element.classList.add('zoomInDown', 'fast')
        setTimeout(() => {
          element.classList.remove('zoomInDown', 'fast')
          element.classList.add('rubberBand')
        }, 800)
      },
      /**
       * 开出中奖的宝箱
       */
      showPrizeFn() {
        const element = document.querySelector('.prize-box-item')
        this.boxEnterAnimate(element)
        setTimeout(() => {
          element.classList.remove('rubberBand')
          this.disableClick = false // 遮罩可以点击
          this.showBox = false
          this.showPrize = true
          this.$emit('refreshFn')
        }, 2500)
      },
      /**
       * 开出未中奖的宝箱
       */
      showNoPrizeFn() {
        const element = document.querySelector('.prize-box-item')
        this.boxEnterAnimate(element)
        setTimeout(() => {
          element.classList.remove('rubberBand')
          this.disableClick = false // 遮罩可以点击
          this.showBox = false
          this.showNoPrize = true
        }, 2500)
      },
      /**
       * 开出未中奖的宝箱
       */
      showNoStartFn() {
        this.showDialogVisible = true
        this.showNoStart = true
        this.disableClick = true
      }
    }
  })
</script>

<style lang="scss">
  @import "../../../../styles/mixin";
  @import "../../../../styles/variables";
  .prize-dialog{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 11;
    &-wrapper{
      .disableClick{
        pointer-events: none;
      }
      position: relative;
      height: 100%;
      .prize-shade{
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(0,0,0, .66);
        top: 0;
      }
      .prize-box{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 43%;
        &-item{
          img{
            width: 340px;
          }
        }
      }
      .prize-box-win, .prize-box-no{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 20%;
        &-txt{
          position: relative;
          img{
            width: 399px;
          }
          .num{
            position: absolute;
            width: 100%;
            text-align: center;
            top: 98px;
            font-size: 64px;
            color: #ffb16d;
            span{
              display: inline-block;
              width: 399px;
              margin-left: -13px;
            }
          }
        }
        &-item{
          margin-top: 105px;
          img{
            position: relative;
            width: 348px;
            z-index: 2;
          }
          .gold-light{
            width: 100%;
            position: absolute;
            z-index: 1;
            margin-top: -130px;
            &-item{
              animation:rotate 10s linear infinite;
              width: 601px;
              height: 601px;
              background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/goldLight.png) center no-repeat;
              background-size: 100% auto;
              margin: 0 auto;
            }
          }
        }
      }
      .prize-box-no{
        &-txt{
          img{
            width: 598px;
          }
        }
      }
      .prize-no-time{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        img{
          width: 412px;
          margin-left: -20px;
        }
        .dialog-wrap{
          margin: 0 auto;
          width: 620px;
          height: 600px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/radishSprite/noTimes.png) center no-repeat;
          background-size:100% auto;
          color: #FEF5D2;
          text-align: center;
          position: relative;
          font-weight: bold;
          &-tit{
            font-size: 36px;
            padding-top: 260px;
            margin-bottom: 36px;
          }
          &-con{
            font-size: 26px;
            line-height: 36px;
          }
          .btn{
            position: absolute;
            width: 100%;
            bottom: 20px;
            img{
              width: 296px;
            }
          }
        }
      }
      $dialogRadius: 20px 20px 0 0;
      $dialogBg: #f8f8f8;
      .gift-wrapper{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 840px;
        background: $dialogBg;
        border-radius: $dialogRadius;
        z-index: 1;
        .header-radish{
          width: 170px;
          height: 170px;
          position: absolute;
          text-align: center;
          margin-top: -90px;
          z-index: 11;
          img{
            width: 92px;
          }
        }
        &-head{
          background: #fff;
          border-radius: $dialogRadius;
          width: 100%;
          height: 135px;
          font-size: 0;
          overflow: hidden;
          position: relative;
          .avatar{
            width: 170px;
            height: 170px;
            border-radius: 50%;
            text-align: center;
            background: $dialogBg;
            margin-top: -80px;
            @include alignTop;
          }
          .head-info{
            @include alignTop;
            width: calc(100% - 170px);
            font-size: 26px;
            color: #666;
            padding-left: 15px;
            padding-top: 24px;
            position: relative;
            .num{
              font-size: 48px;
              color: #333;
              margin-top: 5px;
            }
            .close{
              display: inline-block;
              width: 100px;
              height: 100px;
              line-height: 100px;
              font-size: 50px;
              font-weight: bold;
              position: absolute;
              right: 0;
              top: 0;
              z-index: 1;
              text-align: center;
            }
          }
        }
        &-con{
          padding: 18px;
          height: 720px;
          overflow: auto;
          &-item{
            background: #fff;
            margin-bottom: 20px;
            .gift-info{
              padding: 20px 20px;
              font-size: 0;
              &-left{
                width: 110px;
                text-align: center;
                @include alignTop;
              }
              &-middle{
                @include alignTop;
                font-size: 30px;
                color: #222;
                margin-left: 20px;
                .input{
                  display: inline-block;
                  width: 92px;
                  border: 2px solid #eee;
                  padding: 3px;
                  border-radius: 8px;
                  input{
                    width: 100%;
                    border: none;
                    text-align: center;
                  }
                }
                .txt{
                  margin-top: 35px;
                }
                .title{
                  @include showEllipsis;
                  width: 385px;
                }
                .num{
                  font-size: 0;
                  margin-top: 10px;
                  img{
                    width: 27px;
                    margin-right: 20px;
                  }
                  span{
                    @include alignTop;
                    line-height: 52px;
                    font-size: 26px;
                    color: #666;
                  }
                }
              }
              &-right{
                @include alignTop;
                margin-top: 8px;
                .btn{
                  width: 128px;
                  font-size: 30px;
                  height: 54px;
                  line-height: 54px;
                  border-radius: 54px;
                  text-align: center;
                  color: #fff;
                  background: $mainColor;
                  margin-top: 20px;
                  &.disabled{
                    background: #dcdcdc;
                    pointer-events: none;
                  }
                }
              }
              &.point{
                .gift-info-left{
                  height: 110px;
                  img{
                    width: 73px;
                    margin-bottom: -10px;
                    margin-top: 16px;
                  }
                }
              }
              &.goods{
                .gift-info-left{
                  img{
                    width: 110px;
                    height: 110px;
                    border-radius: 50%;
                  }
                }
                .gift-info-middle{
                  margin-top: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
